<template name="goodInfo">
	<view class="goodTitleBox">
		<view class="goodPrice" v-if="showPrice">
			<text class="price">￥{{goodData.price}}</text>
			<text class="oldPrice" v-if="goodData.oriPrice>0 && goodData.oriPrice>goodData.price  ">￥{{goodData.oriPrice}}</text>
			
		</view>
		<view class="gdTitle">
			<view class="mainTitle"><text>{{goodData.name}}</text> <text class="xieyiShow" v-if="showXieyi">协议退100%</text> </view>
			<!-- #ifndef H5 -->
			<view class="shareBox" @tap="share">
				<text class="iconfont icon-share"></text>
				<block v-if="isLogin && userInfo.code && goodData.courseAgent&& (goodData.courseAgent.income1 ||goodData.courseAgent.income2)">
					<text class="red">赚￥{{yongjin}}</text>
				</block>
				<block v-else>
					<text>分享</text>
				</block>
				
			</view>
			<!-- #endif -->
			
		
		</view>
		<view class="activeBox" v-if="goodData.courseGroup && goodData.courseGroup.leftSeconds>0 && showPt">
			<view class="left">
				<text>拼好课</text>
				<text>阶梯团</text>
			</view>
			<view class="middel">
				<text v-if="goodData.courseGroup.amount1">{{goodData.courseGroup.num1}}人团返：￥{{goodData.courseGroup.amount1}}/人</text>
				<text v-if="goodData.courseGroup.amount2">{{goodData.courseGroup.num2}}人团返：￥{{goodData.courseGroup.amount2}}/人</text>
				<text v-if="goodData.courseGroup.amount3">{{goodData.courseGroup.num3}}人团返：￥{{goodData.courseGroup.amount3}}/人</text>
			</view>
			<image src="../../static/ptBtn.png" @tap="toPage" data-url="groupDetail" :data-id="goodData.courseGroup.id"></image>
		
		</view>
		<view class="sellBox">
			<text class="citys">{{diqu}}</text>
			<text class="sellCount">已预约：{{goodData.sold}}</text>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	import COMM from "@/common/common.js";
	export default{	
		name:'goodInfo',		//组件名称
		// 传递参数
		computed: {
			...mapState({
				isLogin:state=>state.user.isLogin,
				userInfo: state => state.user.userInfo
			})
		},
		props:{
			goodData:{
				type:Object,
				default:()=>{
					return null
				}
			},
			showPt:{
				type:Boolean,
				default:false
			},
			showPrice:{
				type:Boolean,
				default:true
			}
		},
		// 组件参数
		data(){
			return {
				diqu: '',
				showXieyi:false,
				yongjin:0
			}
		},
		// 组件方法
		methods:{
			getCircle(){
				if(this.goodData.courseAgent.income1){
					this.yongjin=this.goodData.courseAgent.income1
				}else{
					this.yongjin=this.goodData.courseAgent.income2
				}
				this.$store.dispatch("apiGetShopDetail",{
					id:this.goodData.storeId?this.goodData.storeId:this.goodData.store.id,
					userId:0
				}).then(res=>{
					let ssq=COMM.getSSQByAreaId(res.data.data.areaId);
					if(res.data.data.streetId){
						this.$store.dispatch("apiGetBusCircle",res.data.data.areaId).then(circleRes=>{
							circleRes.data.data.forEach((x,i)=>{
								if(x.id==res.data.data.streetId){
									this.diqu=x.name
								}
							})
						})
					}else{
						this.diqu=ssq[2]
					}
					
				})
			},
			// 分享功能
			share(){
				this.$root.share();
			},
			checkXieYi(){
				this.showXieyi=this.goodData.protectList.some(x=>{
					return x.name=='协议退100%'
				})
				
				
			}
		},
		created() {
			setTimeout(()=>{
				this.getCircle();
				this.checkXieYi();
			},500)
		}
	}
</script>

<style lang="less" scoped>
	.goodTitleBox {
		
		background-color: #FFFFFF;
		padding-top: 13upx;
		margin-bottom: 13upx;
		padding-bottom: 24upx;
	
		.goodPrice {
			padding: 0 28upx;
			
			display: flex;
			justify-content: flex-start;
			align-items: baseline;
			.price{
				font-size: 64rpx;
				color: #ff3b2b;
				font-weight: bold;
			}
			.price:first-letter {
				font-size: 48rpx;
			}
			.oldPrice{
				text-decoration: line-through;
				font-size: 32upx;
				font-weight: bold;
				color: #aaaaaa;
				margin-left: 20upx;
			}
			
		}
	
		.goodPrice:first-letter {
			font-size: 48rpx;
		}
		.activeBox{
			padding: 30upx 32upx;
			background-image: url(../../static/acbg.png);
			background-size: 100% 100%;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20upx;
			.left{
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;
				text:first-child{
					font-size: 40upx;
					font-weight: bold;
					margin-bottom: 6upx;
				}
				text:last-child{
					font-size: 32upx;
				}
			}
			.middel{
				display: flex;
				flex-direction: column;
				font-size: 28upx;
				
			}
			.rightBtn{
				font-size: 32upx;
				margin: 0;
				background-color: rgba(0,0,0,0);
				border: 2upx solid #FFFFFF;
				color: #FFFFFF;
				padding: 20upx 30upx;
				line-height: 1;
			}
			image{
				width: 120upx;
				height: 120upx;
			}
		}
		
		.gdTitle {
			padding: 0 0 0 28upx;
			display: flex;
			align-items: center;
			.mainTitle{
				font-size: 36rpx;
				font-weight: bold;
				color: #202932;
				flex-grow: 1;
				word-break: break-all;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				text{
					flex-shrink: 0;
				}
				.xieyiShow{
					flex-shrink: 0;
					background-color: #ffcd11;
					color: #FFFFFF;
					font-size: 24upx;
					font-weight: normal;
					padding: 2upx 10upx;
					border-radius: 10upx;
					margin-left: 10upx;
				}
			}
			.shareBox{
				flex-shrink: 0;
				display: flex;
				height: 50upx;
				align-items: center;
				background-color: #EEEEEE;
				padding: 0 20upx;
				border-top-left-radius: 25upx;
				border-bottom-left-radius: 25upx;
				margin-left: 10upx;
				text{
					font-size: 24upx;
					color: #666666;
					font-weight: normal;
				}
				.iconfont{
					color: #666666;
					font-size: 32upx;
					margin-right: 6upx;
				}
				.red{
					color: #fe305b;
				}
			}
		}
	
		.sellBox {
			padding: 0 28upx;
			display: flex;
			margin-top: 20upx;
			justify-content: space-between;
	
			text {
				font-size: 26rpx;
				color: #959ca6;
			}
		}
	}
	
</style>
